<template>
    <section class="study-abroad-wrapper">
        <p><span class="lable-txt">留学人员引进申请类型：</span><span>{{ studyAbroadInfo.studyType }}</span></p>
        <section class="flex-wrapper card-header">
            <p><span class="lable-txt">护照编号：</span><span>{{ studyAbroadInfo.passportNumber }}</span></p>
            <p class="lable-width"><span class="lable-txt">留学国家：</span><span>{{ studyAbroadInfo.studyCountry }}</span></p>
        </section>
        <section class="flex-wrapper card-header">
            <p><span class="lable-txt">留学开始日期：</span><span>{{ studyAbroadInfo.studyStartDate }}</span></p>
            <p class="lable-width"><span class="lable-txt">留学结束日期：</span><span>{{ studyAbroadInfo.studyEndDate }}</span></p>
        </section>
        <p><span class="lable-txt">院校(学科)排名：</span><span>{{ studyAbroadInfo.universityRanking }}</span></p>
        <p><span class="lable-txt">最高学历毕业院校(中文)：</span><span>{{ studyAbroadInfo.highestDegreeSchoolNameCn }}</span></p>
    </section>
</template>


<script setup lang="ts">
import { ref } from 'vue';

const studyAbroadInfo = ref({
    passportNumber: '54123456748901234567',
    studyType: '在国外取得硕士及以上学位',
    studyCountry: '中国',
    studyStartDate: '2023-01-01',
    studyEndDate: '2025-01-01',
    universityRanking: '4',
    highestDegreeSchoolNameCn: '清华大学'
});
</script>

<style lang="scss" scoped>
.study-abroad-wrapper{
    max-width: 700px;
    p{
        padding: 10px 0;
        font-size: 14px;
        :first-child{
            font-weight: 700;
        }
    }
}
.flex-wrapper{
    display: flex;
    align-items: center;
}
.card-header{
    justify-content: space-between; 
}
.lable-width{
    width: 200px;
}
</style>